<!-- 首页 -->
<template>
    <div class="common-layout">
        <el-container>
            <el-header height="70px">
                <!-- 头部顶通栏 -->
                <header class="home-header">
                    <div class="header-left">
                        <h1>叩丁狼电商运营平台</h1>
                        <el-icon @click="isCollapse = !isCollapse">
                            <Menu />
                        </el-icon>
                    </div>
                    <div class="header-right">
                        <span>admin</span>
                        <el-icon size="default">
                            <ArrowDown />
                        </el-icon>
                    </div>
                </header>
            </el-header>
            <el-container>
                <el-aside width="250px">
                    <!-- 左侧菜单栏 -->
                    <el-menu active-text-color="#409eff" background-color="#304156" class="el-menu-vertical-demo"
                        text-color="#fff" :collapse="isCollapse" :unique-opened="true" :router="true">
                        <el-menu-item>
                            <i class="iconfont homepage is_active"></i>
                            <template #title>
                                <span>首页</span>
                            </template>
                        </el-menu-item>
                        <el-sub-menu :index="item.id + ''" v-for="(item, index) in curMenus" :key="item.id"
                            @open="handleOpen" @close="handleClose" :default-active="index">
                            <template #title>
                                <i :class="`iconfont ${item.icon}`"></i>
                                <span>{{ item.title }}</span>
                            </template>
                            <template v-for="cItem in item.childMenus" :key="cItem.id">

                                <el-menu-item v-if="!cItem.hidden" :index="'/' + item.name + '/' + cItem.name"> <i
                                        :class="`iconfont ${cItem.icon}`"></i>{{
                                                cItem.title
                                        }}
                                </el-menu-item>
                            </template>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <!-- 右侧内容 -->
                    <router-view></router-view>
                </el-main>
            </el-container>

        </el-container>
    </div>
    <!--  -->



</template>

<script lang='ts' setup>
import { reactive, toRefs, ref } from 'vue'
import { useUserStore } from '@/store/modules/userStore';
import { computed } from '@vue/reactivity';
const userStore = useUserStore();
// 通过计算属性处理拿到的菜单栏数据  当store里面的数据改变了 这里也会自动跟着更新
let curMenus = computed(() => userStore.genMenusConf)
// console.log(curMenus);
const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    //   console.log(key, keyPath)
}
let isCollapse = ref(false)
</script>
<style lang='scss' scoped>
.el-header {
    padding: 0;
}

.el-main {
    height: calc(100vh - 70px);
    overflow: auto;
}

.home-header {
    width: 100%;
    height: 70px;
    background-color: #409eff;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;

    .el-icon {
        font-size: 22px;
    }

    .header-left,
    .header-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
        line-height: 70px;

        h1 {
            font-weight: 400;
            font-size: 24px;
            margin-right: 20px;
        }
    }
}

.el-menu {
    height: calc(100vh - 70px);

}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 250px;
    min-height: calc(100vh - 70px);
    overflow: auto;
}
</style>